<template>
	<view class="template-circle tn-safe-area-inset-bottom">

		<!-- 视频，采用轮播形式，放10个视频左右，小程序性能决定了这个不能太骚，如果你想骚，可以把微信买下来 -->
		<view class="" v-if="swiperList.length>=1">
			<swiper class="card-swiper" :circular="true" vertical="true" :autoplay="false" duration="500"
				interval="5000" @change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''"
					style="padding: 0;">
					<view class="swiper-item image-banner">
						<!-- <video :id="`video-${item.id}`" :src="item.mp4" loop enable-play-gesture
							style="height: 100vh;width: 100vw;"></video> -->
						<video :id="`video-${item.id}`" :src="item.url" loop enable-play-gesture
							show-mute-btn="true"></video>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<tn-empty mode="data" v-if="swiperList.length<1"></tn-empty>
	</view>
</template>

<script>
	import {
		listWeddingPhoto
	} from '@/api/common/api';
	export default {
		data() {
			return {
				swiperList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					typeId: undefined
				},
				// audio: {}
			}
		},
		onLoad(e) {
			this.queryParams.typeId = e.typeId
			this.init()
		},
		mounted() {
			getApp().globalData.audio.pause();
		},
		onUnload() {
			getApp().globalData.audio.play();
		},
		methods: {
			init() {
				listWeddingPhoto(this.queryParams).then(response => {
					this.swiperList = response.rows;
				});
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
				for (let i = 0; i < this.swiperList.length; i++) {
					const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this)
					if (i === this.cardCur) {
						// #ifdef H5
						videoContext.play()
						// #endif
						// #ifndef H5
						videoContext.play()
						// #endif

					} else {
						// #ifdef MP-WEIXIN
						videoContext.stop()
						// #endif
						// #ifndef MP-WEIXIN
						videoContext.pause()
						// #endif
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-circle {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-safe-area-inset-bottom {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.card-swiper {
		height: 100vh !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100vh;
		border-radius: 0rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.card-swiper swiper-item .swiper-item-png {
		// margin-top: -50vh;
		width: 100%;
		display: block;
		border-radius: 0rpx;
		transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
		transition: all 0.6s ease 0s;
		// overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-png {
		margin-top: -100vh;
		width: 900rpx;
		transform: translate(-80rpx, 0rpx) scale(1, 1);
		transition: all 0.6s ease 0s;
	}
</style>
